<template>
  <page-card :title="menuName" need-back>
   <!-- 头部栏位 -->
   <a-row style="margin-bottom: 20px">
     <!-- 空行 -->
     <a-col :span="1"></a-col>
     <!-- 批量同步 -->
     <a-col :span="4">
       <a-button type="primary" @click="synchronous()">批量同步</a-button>
     </a-col>
     <!-- 空行 -->
     <a-col :span="20"></a-col>
   </a-row>
   <!-- 表格  -->
   <a-table :columns="tableColumns" :data-source="tableData" :pagination="false" :row-selection="{onChange: onChange}">
     <!-- 状态 -->
     <template slot="state" slot-scope="text">
       <span v-show="text == 1" style="color: green">已同步 </span>
       <span v-show="text != 1">未同步</span>
     </template>
     <!-- 操作 -->
     <template slot="action" slot-scope="text, record">
       <a @click="edit(record)">编辑 </a>
       <a @click="synchronous(record)">同步</a>
     </template>
   </a-table>
   <!-- 新增弹窗 -->
 </page-card>
</template>

<script>

// 1、引入Vue等框架组件库或插件
// 2、引入自定义组件
// 3、引入第三方工具类插件
// 4、引入自定义工具或插件或混入或基类等
// 5、引入API
import { getUserList, synchronous } from "../../api/personnel-synchronization";

export default {
 /* 这次操作的人员拉取列表 */
 name: 'PersonnelSynchronizationUserList',
 data () {
   return {
     // 左边被选中的数据
     seleced: [],
     tableData: [],
     tableColumns: [
       {
         dataIndex: 'phone',
         title: '手机号',
         align: 'center',
         key: 'phone'
       },
       {
         dataIndex: 'zwddId',
         title: '政务钉钉id',
         align: 'center',
         key: 'zwddId'
       },
       {
         dataIndex: 'userName',
         title: '姓名',
         align: 'center',
         key: 'userName'
       },
       {
         dataIndex: 'userUnitName',
         title: '所在机构',
         align: 'center',
         key: 'userUnitName'
       },
       {
         dataIndex: 'state',
         title: '状态',
         align: 'center',
         scopedSlots: { customRender: 'state' },
         key: 'state'
       },
       {
         dataIndex: 'option',
         title: '操作',
         align: 'center',
         scopedSlots: { customRender: 'action' },
         key: 'option'
       },
     ]
   }
 },
 computed:{
   // 菜单名字
   menuName(){
     return this.$route.meta.title || this.$route.name
   }
 },
 mounted () {
  this.load()
 },
 methods: {
   /**初加载数据 */
   load(){
     const pullTime = this.$route.query.pullTime
     getUserList({pullTime}).then(res => {
       this.tableData = res
     })
   },
   /**跳转人员编辑页面 */
   edit({deptId: orgid, userUnitId: id}) {
     this.$router.push({
       path: '/user/edit',
       query: { id, orgid}
     })
   },
   /**多选的框框 change事件 */
   onChange(row, datas){
     // 转化为 ｛userId: unitUserId｝
     this.seleced = datas.reduce((res, prv) => {
       res[prv.userId] = prv.userUnitId
       return res
     }, {})
   },
   /**同步调用后端接口 */
   synchronous(record){
     /* 保证单一点击和批量都可以 统一处理一下 为  ｛userId: unitUserId｝ 格式*/
     let ids = {}
     // 没有参数 就从选择中获取参数
     if (!record){
       // 多选的
       ids = this.seleced
     } else {
       // 单行的
       ids[record.userId] = record.userUnitId
     }
     synchronous({pullTime: this.$route.query.pullTime,ids}).then(res => {
       this.load()
     })
   }
 },
}
</script>

<style lang="less" scoped>
</style>